<template>
    <div class="container">
<!--        提示是否删除-->
        <div v-if="tishi" class="tishi">
            <div class="tishi_content">
                <div class="tishi_title">提示</div>
                <div class="tishi_content2">确定删除?</div>
                <div class="tishi_caozuo">
                    <div class="quxiao" @click="cancel">取消</div>
                    <div class="queding" @click="make_sure">确定</div>
                </div>
            </div>
        </div>
        <div class="lishi">
            <!--切换按钮-->
            <div class="top">
                <div>
                    <div class="shujia">我的书架</div>
                    <router-link to="/lishi"><div class="lishi">阅读历史</div></router-link>
                </div>
                <div class="guanli" @click="qingkong">{{edit}}</div>
            </div>
            <!--书架显示-->
            <div class="bookrack" :style="{marginBottom:botm+'px'}">
                <div class="bookrack_book" v-for="bookrack in bookracks" :key="bookrack.ID">
                    <router-link :to="{path:'/book_details',query:{id:bookrack.ID}}">
                        <img v-if="bookrack.ImageUrl" v-lazy="bookrack.ImageUrl">
                        <p>{{bookrack.Title}}</p>
                    </router-link>
                    <!--选中删除-->
                    <div class="shanchu">
                        <div v-if="anniu">
                            <span class="anniu">
                                <div class="dan bag_2" ref="book" :class="bag ? 'bag': ''" >
                                    <input type="checkbox" @click="dian" @change="not_all" :value="bookrack.ID" v-model="check">
                                </div>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="meiyou" v-if="none">没有更多内容了</div>
            <!--底部删除按钮-->
            <div class="delet" v-if="anniu">
                <div class="del">
                    <div class="quanxuan shanchu" >
                        <div>
                            <span class="anniu">
                                <div class="quan" :class="bag ? 'bag': ''">
                                    <input type="checkbox" v-model="select_all" @click="quanxuan">
                                </div>
                            </span>
                        </div>
                        <div>全选</div>
                    </div>
                    <div @click="shan_search">
                        删除
                    </div>
                </div>
            </div>
        </div>
        <bottom :i="icon"></bottom>
    </div>
</template>

<script>
    import bottom from './bottom'
    export default {
        name: "bookrack",
        components:{
            bottom,
        },
        data() {
            return{
                search:{
                    offset: 0,
                    limit: 100,
                },
                icon: 0,
                bookracks: [],//显示的书架图书列表
                check: [], //选中图书列表
                anniu: false, //选中按钮
                select_all: false, //全选
                edit: '管理', //图书编辑按钮
                botm: 0, //图书底部
                none: false,//书架有无图书
                tishi: false,//提示删除
                confirm: false,
                bag: false,//选中样式
            }
        },
        created:function(){
            this.bookracks_search();
            this.set();
            document.title = '我的书架';
        },
        methods: {
            set:function(){
                this.$emit('set',0)
            },
            // 编辑书架
            qingkong:function(){
                this.anniu = !this.anniu;
                this.check = [];
                this.bag = false;
                if(this.anniu){
                    this.edit ='完成';
                    this.botm = 100
                }else{
                    this.edit ='管理';
                    this.botm = 0;
                }
            },
            //选中与取消选中
            dian:function(e){
                //e.currentTarget 获得父级元素
                let bagk = e.currentTarget.parentElement.style.background;
                e.currentTarget.parentElement.style.background = '#f66';
                if ( bagk == 'rgb(255, 102, 102)' ) {
                    e.currentTarget.parentElement.style.background = 'rgba(0,0,0,0.5)'
                } else {
                    e.currentTarget.parentElement.style.background = '#f66';
                }
            },
            not_all:function(){
                if(this.bookracks.length==this.check.length){
                    this.select_all=true;
                    this.bag = true
                }else{
                    this.select_all=false;
                    this.bag = false;
                }
            },
            quanxuan:function(){
                let bagk = this.$refs.book;
                if(this.select_all){
                    this.check=[];
                    this.bag = false;
                    for (let i=0,ln=bagk.length;i<ln;i++){
                        bagk[i].style.background = 'rgba(0,0,0,0.5)';
                    }
                }else{
                    let book=[];
                    for(let i=0,ln=this.bookracks.length;i<ln;i++){
                        book.push(this.bookracks[i].ID);
                    }
                    this.check=book;
                    this.bag = true;
                    for (let i=0,ln=bagk.length;i<ln;i++){
                        bagk[i].style.background = '#f66';
                    }
                }
            },
            bookracks_search: function() {
                this.$axios.get('/collect-books',{params:{Limit:this.search.limit,Offset:this.search.offset}}).then(response=>{
                    if(response.data.Books) {
                        this.bookracks = response.data.Books;
                    } else {
                        this.none = true;
                        this.bookracks = [];
                    }
                })
            },
            shan_search: function() {
                this.tishi = true;
            },
            //删除
            make_sure:function(){
                let str=JSON.stringify(this.check);
                let strs=str.substring(1,str.length-1);
                this.confirm = true;
                this.tishi = false;
                if(this.confirm){
                    this.$axios.delete('/collect-books',{params:{BookIDs:[strs]}}).then(response=>{
                        if(response){
                            this.check=[];
                            this.bookracks_search();
                        }
                    })
                }
            },
            //取消删除
            cancel:function(){
                this.tishi = false
            }
        }
    }
</script>

<style scoped>
    body {
        background: #f9fafa;
        margin: 0px;
    }
    .tishi{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        display: flex;
        background: rgba(0,0,0,0.5);
        justify-content: center;
        align-items: center;
        z-index: 10000;
    }
    .tishi_content{
        width: 67%;
        height: 20vh;
        background: white;
        border-radius: 7px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .tishi_title{
        margin: 16px 0px -5px;
        color: #333;
        font-size: 1.2rem;
    }
    .tishi_content2{
        color: #888;
        font-size: 1rem;
    }
    .tishi_caozuo{
        display: flex;
        justify-content: space-between;
        text-align: center;
        align-items: center;
        border-top: 1px solid #ddd;
    }
    .tishi_caozuo div{
        width: 50%;
        padding: 12px 0px;
        font-size: 1.1rem;
    }
    .quxiao{
        border-right: 1px solid #ddd;
    }
    .queding{
        color: #3688ff;
    }
    .container {
        background: white;
        margin-bottom: 70px;
        padding: 0px;
    }
    .top{
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #DDDDDD;
        font-size: 1.1rem;
        background: white;
        padding: 15px 0px;
        position: fixed;
        top: 0px;
        width: 100%;
        z-index: 100;
    }
    .top div{
        display: flex;
        padding-left: 10px;
    }
    .yuelishi,.top .lishi{
        margin-left: 15px;
    }
    .top a{
        text-decoration: none;
        color: black;
    }
    .shujia,.yuelishi{
        color: #3688ff;
    }
    .guanli{
        color: gray;
        padding-right: 15px;
    }
    .bookrack{
        display: flex;
        flex-wrap: wrap;
        padding:15px 0px;
        margin-top: 50px;
    }
    .bookrack_book{
        width:28%;
        text-align: center;
        padding-top: 10px;
        margin-left: 4%;
        position: relative;
    }
    .bookrack_book img{
        width: 100%;
        height: 20vh;
        -webkit-box-shadow: 0 4px 10px rgba(0,0,0,.2);
        box-shadow: 0 4px 10px rgba(0,0,0,.2);
        /*border-radius:10px ;*/
    }
    .bookrack_book p{
        width: 100%;
        margin: 5px 0px;
    }
    .bookrack_book a{
        text-decoration: none;
        color: black;
    }
    .ceng{
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #DDDDDD;

    }
    .intro a{
        text-decoration: none;
        color: black;
    }
    .intro img {
        width: 6.5rem;
        height: 8.5rem;
        margin-left: 15%;
        border-radius: 6px;
    }
    .intro_right p{
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .meiyou {
        text-align: center;
        padding: 10px;
        color: #999;
    }
    .shanchu{
        width: 2rem;
        height: 2rem;
        margin-right: 10px;
        font-size: .24rem;
        padding-left: .1rem;
        text-align: center;
        -webkit-align-self: center;
        -ms-flex-item-align: center;
        align-self: center;
        color: #3688ff;
    }
    .bookrack .shanchu{
        position: absolute;
        right: -7px;
        top: 15px;
    }
    .shanchu span{
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        border-radius:50%;
        border: 2px solid #fff;
    }
    .shanchu span div{
        width: 1.5rem;
        height: 1.5rem;
        border-radius:50% ;
    }
    .shanchu input{
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    .bag_2{
        background: rgba(0,0,0,0.5);
    }
    .bag{
        background: #F66 !important;
    }

    .del{
        display: flex;
        justify-content: space-between;
        padding: 13px 0px;
        position: fixed;
        width: 100%;
        bottom: 45px;
        border-top: 1px solid #ccc;
        background: white;
        border-bottom: 1px solid #ccc;
        font-size: 1.1rem;
    }
    .del>div:nth-child(2){
        margin-right: 15px;
    }
    .delet{
        color:gray;
    }
    .quanxuan{
        display: flex;
        justify-content: space-between;
        width: 5.3rem;
        font-size: 1.1rem;
        color: #f66;
    }
    .quanxuan>div:nth-child(2){
        margin: 1px 0px 0px 3px;
    }
    .quanxuan .anniu{
        margin-left: 13px;
        border: 2px solid #f66;
    }
    .quanxuan .anniu .quan{
        width: 1.4rem;
        height: 1.4rem;
        margin: 1px;
    }
    .del>.shanchu{
        position: static;
    }
    .see_more{
        padding: 10px 0px;
        margin: 10px;
        background: #ff4772;
        border-radius:5px;
        text-align: center;
        color: white;
        font-size: 16px;
        display: none;
    }
    .footer {
        position: fixed;
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-around;
        font-size: 1rem;
        text-align: center;
        bottom: 0px;
        background: white;
        padding-top: 5px;
        border-top:1px solid #DDDDDD ;
    }
    .iconfont{
        font-size: 22px!important;
    }
    .footer a {
        text-decoration: none;
        color: gray;
    }
    .shujia p{
        color: #3688FF;
    }
    @media (min-width: 300px) {
        .container {
            width: 100%;
        }
    }

    @media (min-width: 768px) {
        .container {
            width: 750px;
        }
        .tuijian img{
            width: 9rem;
        }
        .img{
            width: 3.5rem !important;
        }
        .books img{
            width: 9rem;
        }
    }

</style>
